import QtQuick 2.0
import QtQuick.Layouts

Component{
    id:deviceListPage
    Rectangle{
        anchors.fill: parent
        anchors.margins: 20
        color:"transparent"

        GridView{
            id:deviceGrid
            anchors.fill: parent
            cellWidth: parent.width / 5
            cellHeight: parent.height / 2
            clip: true
            model: DeviceList{}
            delegate: Loader{
                id:deviceLoader
                width: deviceGrid.cellWidth-8
                height: deviceGrid.cellHeight-8
                anchors.margins: 10
                sourceComponent:DeviceCard{
                }
                Connections{
                    target: deviceLoader.item
                    function onDeviceBtnClickSig(deviceName,state){
                        var jsonData = {
                            "command":"control",
                            "data":{
                                "name":deviceName,
                                "state":state
                            }
                        }
                        tcpSocket.sendMsg(jsonData)
                    }
                }
                Connections{
                    target: devicePageItem
                    function onSyncDevicePage(){
                        deviceGrid.model = deviceListModel
                    }
                }

                onLoaded:{
                    item.deviceName = model.deviceName
                    item.deviceState = model.deviceState
                    item.deviceIcon = model.deviceIcon
                }
            }
            boundsBehavior:  Flickable.StopAtBounds  // 滑动不超出父框的大小
        }
    }
}

